<template>
  <div :class="$style.container">
    <div :class="$style.info_item" :style="{ backgroundColor: background, border: border }">
      <div :class="$style.info">
        <div :class="$style.number">{{ item.value }}</div>
        <div :class="[$style.name, $style.text_overflow_ellipsis]">{{ item.label }}</div>
      </div>
      <span v-if="icon" :class="icon"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NumberInfo',
  props: {
    background: {
      type: String,
      default: '#0C466D'
    },
    border: {
      type: String,
      default: '1px solid #21A6FB'
    },
    icon: {
      type: String,
      default: function () {
        return '';
      }
    },
    item: {
      type: Object
    }
  },

  data () {
    return {};
  }
};
</script>

<style lang="scss" module>
@import '../../../style/default/number-info.scss';
</style>
